<template>
  <el-card ref="box" shadow="never">
    <ve-histogram height="400px" v-if="$permiss[413]" :data="amountChartsData" :extend="chartsExtend"
                  :settings="amountSettings"
                  ref="charts1"></ve-histogram>
  </el-card>
</template>

<script>

import {formatMoney, debounce} from "@/utils/tools";
import VeHistogram from 'v-charts/lib/histogram.common'

export default {
  components: {
    [VeHistogram.name]: VeHistogram,
  },
  props: ['dataTrends',],
  data() {
    return {
      chartsExtend: {
        color: ['#4B85FF', '#F75C78', '#3AC990', '#FF8D00'],
        series: {
          smooth: false
        },
        grid: {
          right: 30
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              color: '#eeeeee'
            }
          },
          axisLabel: {
            // formatter: (value) => {
            //   if (this.dataTrends && this.dataTrends.length) {
            //     return formatMoney(value, 0, "", '.')
            //   } else {
            //     return value
            //   }
            // }
          }
        },
        tooltip: {
          extraCssText: 'box-shadow: -1px 4px 21px 0px rgba(182, 182, 182, 0.57);',
          backgroundColor: '#fff',
          textStyle: {
            color: '#333'
          },
          padding: 15,
          formatter: (params) => {
            let res = '<div style="margin-bottom: 5px">' + params[0].axisValue + '</br>'
            const marker = (value) => {
              return value.componentSubType === 'bar' ? value.marker : `<span style="display:inline-block;width:12px;height:3px;margin: 3px 5px 3px 0;background-color:${value.color};"></span>`
            }
            for (let i = 0; i < params.length; i++) {
              const value = params[i].componentSubType === 'bar' ? formatMoney(params[i].value, 0, "", '.') : params[i].value
              res += marker(params[i]) + params[i].seriesName + ': ' + value + '</br>'
            }
            return res + '</div>'
          }
        }
      },
      amountSettings: {
        axisSite: {right: ['pay', 'refund', 'roll', 'should']},
        yAxisName: [this.$t('金额'), this.$t('笔数')],
        showLine: ['pay', 'refund', 'roll', 'should'],
        labelMap: {
          time: this.$t('日期'),
          payAmount: this.$t('打款金额'),
          refundAmount: this.$t('实还金额'),
          rollAmount: this.$t('展期金额'),
          shouldAmount: this.$t('应还金额'),
          pay: this.$t('打款笔数'),
          refund: this.$t('实还笔数'),
          roll: this.$t('展期笔数'),
          should: this.$t('应还笔数'),
        },
      },
      amountChartsData: {
        columns: ['time', 'payAmount', 'refundAmount', 'rollAmount', 'shouldAmount', 'pay', 'refund', 'roll', 'should'],
        rows: []
      },
    }
  },
  watch: {
    dataTrends(value) {
      this.amountChartsData.rows = value
    },
  },
  mounted() {
    window.addEventListener('resize', this.getReSize)
  },
  activated() {
    this.$refs['charts1'].echarts.resize()
  },
  methods: {
    getReSize: debounce(function () {
      this.$refs['charts1'].echarts.resize()
    }, 200)
  },
  beforeDestroy() {
    this.$refs['charts1'].clean()
    window.removeEventListener('resize', this.getReSize)
  },

}
</script>

<style scoped>

</style>
